<template>
  <div class="filterUser">
    <el-form-item label="">
      <p class="userText">受众用户为满足以下条件的用户（非必选）</p>
      <p class="userTextInfo">若下列条件不添加，则受众用户默认为全部注册用户</p>
      <div class="filterUserContent rowFlex">
        <div
          class="huoLeft"
          @click="ruleForm.condition_operation == 1 ?ruleForm.condition_operation = 2 : ruleForm.condition_operation = 1 "
        >
          <!-- operation -->
          <div class="and_or">{{ ruleForm.condition_operation == 1 ? '且' : '或' }}</div>
        </div>
        <div class="huoRight columnFlex">
          <!-- 用户属性 -->
          <div class="filterItem">
            <div class="filterItemTitle  rowFlex spaceBetween"><span>用户属性满足</span>
              <div
                class="addItem rowFlex columnCenter"
                @click="addFilteritem('property')"
              > <i class="el-icon-circle-plus addIcon"></i> 添加</div>
            </div>
            <div class="filterItemContent rowFlex columnCenter">
              <div
                v-if=" ruleForm.member_attribute && ruleForm.member_attribute.condition && ruleForm.member_attribute.condition.length>1"
                class="huoLeft"
                style="height:100%;"
              >
                <div
                  class="and_or"
                  @click="ruleForm.member_attribute.operation == 1 ?ruleForm.member_attribute.operation = 2 : ruleForm.member_attribute.operation = 1 "
                >{{ ruleForm.member_attribute.operation == 1 ? '且' : '或' }}</div>
              </div>
              <div class="allItem">
                <div
                  v-for="(user,index) in ruleForm.member_attribute.condition"
                  :key="index"
                  class="filterConditions  rowFlex columnCenter spaceBetween"
                >
                  <div class="filterConditionsItem rowFlex columnCenter">
                    <el-select
                      v-model="user.type"
                      style="width:120px;margin-right:10px;"
                      :clearable="false"
                      placeholder="请选择"
                    >
                      <el-option
                        v-for="item in selectOption"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      >
                      </el-option>
                    </el-select>
                    <!-- 支付状态 -->
                    <el-select
                      v-if="user.type=='pay_status'"
                      v-model="user.status"
                      style="width:120px;margin-right:10px;"
                      :clearable="false"
                      placeholder="请选择"
                    >
                      <el-option
                        v-for="item in payStatusList"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      >
                      </el-option>
                    </el-select>
                    <!-- 染色时间 -->
                    <div
                      v-else
                      class="rowFlex columnCenter"
                    >
                      <el-select
                        v-model="positionTime"
                        style="width:120px;margin-right:10px;"
                        :clearable="false"
                        :disabled="true"
                        placeholder="请选择"
                      >
                        <el-option
                          v-for="item in positionTimeList"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value"
                        >
                        </el-option>
                      </el-select>
                      <span>过去</span>
                      <el-input-number
                        v-model="user.start"
                        :min="0"
                        controls-position="right"
                        style="margin:0 10px;"
                        @input.native="numChange($event)"
                      ></el-input-number>
                      <span>—</span>
                      <el-input-number
                        v-model="user.end"
                        :min="0"
                        controls-position="right"
                        style="margin:0 10px;"
                        @input.native="numChange($event)"
                      ></el-input-number>
                      <el-select
                        v-model="user.unit"
                        style="width:80px;margin:0 10px 0 0 ;"
                        :clearable="false"
                        placeholder="请选择"
                      >
                        <el-option
                          v-for="item in unitList"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value"
                        >
                        </el-option>
                      </el-select>
                      <el-select
                        v-model="user.range"
                        style="width:80px;margin:0 10px 0 0;"
                        :clearable="false"
                        placeholder="请选择"
                      >
                        <el-option
                          v-for="item in rangeList"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value"
                        >
                        </el-option>
                      </el-select>
                    </div>
                  </div>
                  <div
                    v-if="ruleForm.member_attribute.condition && ruleForm.member_attribute.condition.length>0"
                    class="removeItem"
                    @click="removeItem(index,'property')"
                  > <i class="el-icon-close"></i> </div>
                </div>
              </div>
            </div>
          </div>
          <!-- 用户行为 -->
          <div class="filterItem">
            <div class="filterItemTitle  rowFlex spaceBetween"><span>用户行为满足</span>
              <div class="addItem rowFlex columnCenter"> <i
                  class="el-icon-circle-plus addIcon"
                  @click="addFilteritem('action')"
                ></i> 添加</div>
            </div>
            <div class="filterItemContent rowFlex columnCenter">
              <div
                v-if="ruleForm.member_action.condition && ruleForm.member_action.condition.length>1"
                class="huoLeft"
                style="height:100%;"
              >
                <div
                  class="and_or"
                  @click="ruleForm.member_action.operation == 1 ?ruleForm.member_action.operation = 2 : ruleForm.member_action.operation = 1 "
                >{{ ruleForm.member_action.operation == 1 ? '且' : '或' }}</div>
              </div>
              <div class="allItem">
                <div
                  v-for="(user,index) in ruleForm.member_action.condition"
                  :key="index"
                >
                  <div class="filterConditions  rowFlex columnCenter spaceBetween">
                    <div class="filterConditionsItem rowFlex columnCenter">
                      <el-select
                        v-model="user.type"
                        style="width:120px;margin-right:10px;"
                        :clearable="false"
                        placeholder="请选择"
                      >
                        <el-option
                          v-for="item in actionOption"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value"
                        >
                        </el-option>
                      </el-select>
                      <el-select
                        v-model="user.num_type"
                        style="width:120px;margin-right:10px;"
                        :clearable="false"
                        placeholder="请选择"
                        :disabled="true"
                      >
                        <el-option
                          v-for="item in allNumList"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value"
                        >
                        </el-option>
                      </el-select>
                      <el-select
                        v-model="user.operation"
                        style="width:120px;margin-right:10px;"
                        :clearable="false"
                        placeholder="请选择"
                      >
                        <el-option
                          v-for="item in operationList"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value"
                        >
                        </el-option>
                      </el-select>
                      <el-input-number
                        v-model="user.num"
                        controls-position="right"
                        :min="0"
                        style="margin:0 10px 0 0;"
                        @input.native="numChange($event)"
                      ></el-input-number>
                    </div>
                    <div
                      v-if="ruleForm.member_action.condition && ruleForm.member_action.condition.length>0"
                      class="removeItem"
                      @click="removeItem(index,'action')"
                    > <i class="el-icon-close"></i> </div>
                  </div>
                  <p
                    v-if="user.type=='cancel_pay'"
                    class="actionInfo"
                  >取消充值：指发起订单，未支付次数（当日累计）</p>
                  <p
                    v-else-if="user.type=='close_template'"
                    class="actionInfo"
                  >关闭充值模板次数：指关闭充值模板，未创建订单次数（当日累计）</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </el-form-item>
  </div>
</template>
<script>
export default {
  props: {
    ruleForm: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      // 用户属性
      positionTime: 1,
      selectOption: [
        { label: '染色时间', value: 'seq_time' },
        { label: '支付状态', value: 'pay_status' }
      ],
      payStatusList: [
        { label: '全部', value: -1 },
        { label: '未支付', value: 0 },
        { label: '已支付', value: 1 }
      ],
      positionTimeList: [{ label: '相对时间', value: 1 }],
      unitList: [
        { label: '时', value: 1 },
        { label: '天', value: 2 }
      ],
      rangeList: [
        { label: '之内', value: 1 },
        { label: '之外', value: 2 }
      ],
      // 用户行为
      actionOption: [
        { label: '取消支付', value: 'cancel_pay' },
        { label: '关闭充值模版', value: 'close_template' }
      ],
      allNumList: [{ label: '总次数', value: 1 }],
      actionNum: 1,
      operationList: [
        { label: '小于等于', value: 1 },
        { label: '大于等于', value: 2 }
      ]
    }
  },
  methods: {
    numChange(e) {
      e.target.value = e.target.value.replace(/[^\d]/g, '')
    },
    addFilteritem(type) {
      if (type == 'property') {
        this.ruleForm.member_attribute.condition.push({
          type: 'seq_time',
          time_type: 1,
          start: 10,
          end: 24,
          unit: 1,
          range: 1,
          status: -1
        })
      } else {
        this.ruleForm.member_action.condition.push({
          type: 'cancel_pay',
          operation: 1,
          num_type: 1,
          num: 20
        })
      }
    },
    removeItem(index, type) {
      if (type == 'action') {
        this.ruleForm.member_action.condition.splice(index, 1)
      } else {
        this.ruleForm.member_attribute.condition.splice(index, 1)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.filterUser {
  .userText {
    font-size: 16px;
    font-family: PingFangSC, PingFang SC;
    font-weight: 500;
    color: #1d2129;
  }
  .userTextInfo {
    font-size: 13px;
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    color: #86909c;
    line-height: 18px;
  }
  .filterUserContent {
    width: 100%;
    padding-top: 10px;
    .huoRight {
      min-width: 900px;
      height: auto;
      .filterItem {
        margin: 10px 0;
        padding: 10px 20px 0px 20px;
        .filterItemTitle {
          font-size: 14px;
          font-family: PingFangSC, PingFang SC;
          font-weight: 500;
          color: #1d2129;
          margin-bottom: 12px;
        }
        .addItem {
          font-size: 14px;
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          color: #1d2129;
          cursor: pointer;
          user-select: none;
        }
        background: #f7f8fa;
      }
    }
    .allItem {
      width: 100%;
    }
    .filterConditions {
      margin-top: 10px;
      width: 100%;
      .filterConditionsItem {
      }
    }
  }
  .filterItemContent {
    width: 100%;
    height: calc(100% - 72px);
  }
  .addIcon {
    color: #00bf8a;
    font-size: 20px;
    margin-right: 5px;
    cursor: pointer;
  }
  .removeItem {
    color: #86909c;
    font-size: 20px;
    font-weight: bolder;
    cursor: pointer;
  }

  .huoLeft {
    position: relative;
    width: 1px;
    width: 15px;
    border-right: 2px solid rgba($color: #00bf8a, $alpha: 0.2);
    margin: 10px 20px 10px 0;
    .and_or {
      position: absolute;
      top: 50%;
      left: 5px;
      transform: translateY(-10px);
      color: #00bf8a;
      font-weight: 500;
      width: 20px;
      height: 20px;
      text-align: center;
      line-height: 18px;
      background: #eaf7f3;
      border-radius: 4px;
      cursor: pointer;
      user-select: none;
    }
  }
  .huoLeft::before {
    content: ' ';
    display: block;
    width: 15px;
    height: 1px;
    background: rgba($color: #00bf8a, $alpha: 0.5);
    position: absolute;
    left: 7px;
  }
  .huoLeft::after {
    content: ' ';
    display: block;
    width: 15px;
    height: 1px;
    background: rgba($color: #00bf8a, $alpha: 0.5);
    position: absolute;
    left: 7px;
    bottom: 0;
  }
  .actionInfo {
    font-size: 13px;
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    color: #86909c;
  }
}
</style>
